<template>
	<view class="page">
		<u-popup :show="showPopupLogin" @close="closePop" :closeable="true" :round="10" :closeOnClickOverlay="true" :safeAreaInsetBottom="true" :zIndex="100000">
			<view class="p-3">
				<view class="page-content">
					<view class="page-content-text">
						登录
					</view>
				</view>
				<view class="page-main">
					<view class="page-main-input">
						<input class="pl-3" maxlength="11" type="text" v-model="formData.phonenumber"
							placeholder="手机号登录" placeholder-class="page-main-input-placeholder" />
					</view>
					<!-- <view class="page-main-input" style="margin-top:40rpx;">
				<input  class="pl-3" v-model="formData.code" type="text" placeholder="请输入验证码"
					placeholder-class="page-main-input-placeholder" />
				<view class="page-main-input-code" @click="getCode">
					<u-code :seconds="seconds" ref="uCode" @change="codeChange" startText="获取验证码">
					</u-code>
					<text>{{tips}}</text>
				</view>
			</view> -->
					<!-- <view class="page-main-xieyi flex j-start a-center">
					<u-checkbox-group v-model="checkboxValue1" placement="column">
						<u-checkbox activeColor="#409EFF" shape="circle" size="18" labelSize="18" labelColor="#999"
							:customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
							 :name="item.name">
							
						</u-checkbox>
					</u-checkbox-group>
				<view class="mb-2" :style="{color:checkboxValue1.length==0?'#333333':'#409EFF'}" @click="navigateTo('pages/login/agreement')">《用户使用协议》</view>
			</view> -->
					<view class="page-main-btn" @click="loginClick">
						登录
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showPopup" @close="showPopup=false" :round="10" :closeable="true">
			<view class="p-3">
				<view class="text-center font-bold p-4">用户使用协议</view>
				<scroll-view scroll-y="true" style="max-height: 70vh;min-height: 30vh;">
					<u-parse :content="agreementContent.content"></u-parse>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		login,
		phoneCode
	} from '@/api/login.js'
	export default {
		data() {
			return {
				seconds: 30,
				tips: '验证码',
				formData: {
					xcxCode: '',
					phonenumber: '',
					clientId: '5wksu43bfrm9tp39cgswbxdr3ye53xf2',
					grantType: 'xcx',
					code: ''
				},
				codeText: '',
				checkboxList1: [{
					name: '《用户使用协议》'
				}],
				checkboxValue1: [],
				showPopup: false,
				agreementContent: {},
				showPopupLogin:false
			}
		},
		onReady() {},
		onLoad() {
			// this.getappAgreement();
		},

		methods: {
			open(){
				this.showPopupLogin=true;
				this.formData.phonenumber=''
			},
			closePop(){
				console.log(11111)
				this.showPopupLogin=false;
			},
			loginClick() {

				if (!this.formData.phonenumber) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (!this.validMobile(this.formData.phonenumber)) {
					uni.$u.toast('请输入正确的手机号');
					return
				}
				// if (!this.formData.code) {
				// 	uni.$u.toast('请输入验证码');
				// 	return
				// }
				// if (!this.checkboxValue1) {
				// 	uni.$u.toast('请先确定并阅读用户使用协议');
				// 	return
				// }
				uni.login({
					provider: 'weixin',
					success: (u) => {
						this.formData.xcxCode = u.code;
						this.$store.dispatch("Login", this.formData).then(res => {
							this.showPopupLogin=false;
						})
					}

				})


			},
			getAccountInfo() {
				this.$store.dispatch("UserInfo", this.formData.phonenumber).then(res => {
					
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getappAgreement() {
				appAgreement({
					channelId: '3001',
					type: '6001'
				}).then(res => {
					this.agreementContent = res.data
				})
			},
			validMobile(value) {
				const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (reg.test(value)) {
					return true
				} else {
					return false
				}
			},
			getCode() {
				if (!this.formData.phonenumber) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (!this.validMobile(this.formData.phonenumber)) {
					uni.$u.toast('请输入正确的手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					phoneCode({
						phonenumber: this.formData.phonenumber
					}).then(res => {
						uni.$u.toast('验证码已发送注意查收');
						uni.hideLoading();
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			checkboxChange() {

			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-size: 32rpx;
		color: #212121;
		background: #f6f6f6;
	}

	.page {
		&-content {
			position: relative;
			width: 100%;
			overflow: hidden;

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
			}

			&-text {
				padding-top: 30rpx;
				text-align: center;
				font-size: 42rpx;
				font-weight: 500;
			}
		}

		&-main {
			padding: 40rpx;

			&-input {
				width: 100%;
				height: 98rpx;
				background: #EDEDED;
				border-radius: 60rpx;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 32rpx;
					flex-shrink: 0;
				}

				input {
					width: 100%;
					height: 100%;
				}

				.placeholder {
					font-size: 36rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #C3C3C3;
				}

				&-code {
					flex-shrink: 0;
					background: linear-gradient(7deg, #409EFF 0%, #409EFF 100%);
					min-width: 200rpx;
					height: 98rpx;
					text-align: center;
					line-height: 98rpx;
					font-size: 32rpx;
					padding: 0 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					border-radius: 40px;
				}
			}

			&-xieyi {
				margin-top: 40rpx;
				padding: 0 30rpx;
			}

			&-btn {
				margin-top: 50rpx;
				margin-bottom: 30rpx;
				width: 100%;
				height: 98rpx;
				background: linear-gradient(7deg, #409EFF 0%, #409EFF 100%);
				text-align: center;
				line-height: 98rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				border-radius: 40px;
			}
		}
	}
</style>